<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>添加商品</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- page style -->
  <style>
  .my-input{
    width: 33.33333333% !important;
  }
  .my-input-file{
    display: inline-block !important;
    width: 0;
		position:absolute;
		clip:rect(0px,0px,0px,0px);
  }
  .datepicker{
    z-index: 9999 !important;
  }
  </style>
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="/admin/css/bootstrap/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/admin/css/font-awesome/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/admin/css/Ionicons/ionicons.min.css">
  <!-- bootstrap datepicker -->
  <link rel="stylesheet" href="/admin/css/bootstrap-datepicker/bootstrap-datepicker.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/admin/css/AdminLTE/AdminLTE.min.css">
  <!-- AdminLTE Skin -->
  <link rel="stylesheet" href="/admin/css/AdminLTE/skin/skin-blue.min.css">
  <!-- Google Font -->
  <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- Main Header -->
  <div th:replace="~{admin/commons/commons::header}"></div>
  <!-- Left side column. contains the logo and sidebar -->
  <div th:replace="~{admin/commons/commons::sidebar}"></div>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1><small></small></h1>
      <ol class="breadcrumb">
        <li><i class="fa fa-dashboard">&nbsp;商品管理</i></li>
        <li class="active">添加商品</li>
      </ol>
    </section>
    <!-- Main content -->
    <section class="content container-fluid">
      <!-- Horizontal Form -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">信息录入</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form class="form-horizontal" id="fm-add" role="form"  enctype="multipart/form-data">
          <div class="box-body">
            <div class="form-group">
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="isbn" id="isbn" placeholder="图书编号">
              </div>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="title" id="title" placeholder="书名">
              </div>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="author" id="author" placeholder="作者">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="price" id="price" placeholder="价格">
              </div>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="pages" id="pages" placeholder="页数">
              </div>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="words" id="words" placeholder="字数">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="press" id="press" placeholder="出版社">
              </div>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="edition" id="edition" placeholder="版次">
              </div>
              <div class="col-sm-10 my-input">
                <input type="text" class="form-control" name="published" id="published" placeholder="出版日期">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-10 my-input">
                <select class="form-control" name="format" id="format">
                  <option selected>开本</option>
                  <option value="16开">16开</option>
        					<option value="32开">32开</option>
        					<option value="64开">64开</option>
                </select>
              </div>
              <div class="col-sm-10 my-input">
                <select class="form-control" name="packaging" id="packaging">
                  <option selected>包装</option>
                  <option value="平装">平装</option>
        					<option value="精装">精装</option>
                </select>
              </div>
              <div class="col-sm-10 my-input">
                <select class="form-control" name="form" id="form">
                  <option selected>用纸</option>
                  <option value="胶版纸">胶版纸</option>
        					<option value="铜版纸">铜版纸</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-10 my-input">
                <label for="index" class="btn btn-default">索引图</label>
                <input type="file" name="index" id="index" class="my-input-file" >
                <span id="indexfile"></span>
              </div>
              <div class="col-sm-10 my-input">
                <label for="intro" class="btn btn-default">介绍图</label>
                <input type="file" name="intro" id="intro" class="my-input-file" >
                <span id="introfile"></span>
              </div>
              <div class="col-sm-10 my-input">
                <label for="collect" class="btn btn-default">收集图</label>
                <input type="file" name="collect" id="collect" class="my-input-file" >
                <span id="collectfile"></span>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-10 my-input">
                <label for="detail1" class="btn btn-default">详图 1</label>
                <input type="file" name="detail1" id="detail1" class="my-input-file" >
                <span id="detail1file"></span>
              </div>
              <div class="col-sm-10 my-input">
                <label for="detail2" class="btn btn-default">详图 2</label>
                <input type="file" name="detail2" id="detail2" class="my-input-file" >
                <span id="detail2file"></span>
              </div>
              <div class="col-sm-10 my-input">
                <label for="detail3" class="btn btn-default">详图 3</label>
                <input type="file" name="detail3" id="detail3" class="my-input-file" >
                <span id="detail3file"></span>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-10 my-input">
                <label for="detail1big" class="btn btn-default">大图 1</label>
                <input type="file" name="detail1big" id="detail1big" class="my-input-file" >
                <span id="detail1bigfile"></span>
              </div>
              <div class="col-sm-10 my-input">
                <label for="detail2big" class="btn btn-default">大图 2</label>
                <input type="file" name="detail2big" id="detail2big" class="my-input-file" >
                <span id="detail2bigfile"></span>
              </div>
              <div class="col-sm-10 my-input">
                <label for="detail3big" class="btn btn-default">大图 3</label>
                <input type="file" name="detail3big" id="detail3big" class="my-input-file" >
                <span id="detail3bigfile"></span>
              </div>
            </div>
            <div class="form-group">
            	<div class="col-sm-10">
            	<span id="info"></span>
            	</div>
            </div>
          </div>
          <!-- /.box-body -->
          <div class="box-footer">
            <button type="submit" class="btn btn-primary pull-right" id="bt-submit">提交</button>
          </div>
          <!-- /.box-footer -->
        </form>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- Main Footer -->
  <div th:replace="~{admin/commons/commons::footer}"></div>

  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
  immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="/admin/js/jquery/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/admin/js/bootstrap/bootstrap.min.js"></script>
<!-- bootstrap datepicker -->
<script src="/admin/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/admin/js/bootstrap-datepicker/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- AdminLTE App -->
<script src="/admin/js/AdminLTE/adminlte.min.js"></script>
<!-- page script -->
<script>
//Date picker
$('#published').datepicker({
  language: 'zh-CN',
  todayHighlight: true,
  format: 'yyyy-mm-dd',
  autoclose: true
});

$('#index').change(function () {
    var str = $(this).val();
    var fileName = str.substring(str.lastIndexOf("\\") + 1);
    // var fileExt = str.substring(str.lastIndexOf('.') + 1);
    // alert(fileName);
    $('#indexfile').html(fileName);
});

$('#intro').change(function () {
    var str = $(this).val();
    var fileName = str.substring(str.lastIndexOf("\\") + 1);
    $('#introfile').html(fileName);
});

$('#collect').change(function () {
    var str = $(this).val();
    var fileName = str.substring(str.lastIndexOf("\\") + 1);
    $('#collectfile').html(fileName);
});

$('#detail1').change(function () {
    var str = $(this).val();
    var fileName = str.substring(str.lastIndexOf("\\") + 1);
    $('#detail1file').html(fileName);
});

$('#detail2').change(function () {
    var str = $(this).val();
    var fileName = str.substring(str.lastIndexOf("\\") + 1);
    $('#detail2file').html(fileName);
});

$('#detail3').change(function () {
    var str = $(this).val();
    var fileName = str.substring(str.lastIndexOf("\\") + 1);
    $('#detail3file').html(fileName);
});

$('#detail1big').change(function () {
    var str = $(this).val();
    var fileName = str.substring(str.lastIndexOf("\\") + 1);
    $('#detail1bigfile').html(fileName);
});

$('#detail2big').change(function () {
    var str = $(this).val();
    var fileName = str.substring(str.lastIndexOf("\\") + 1);
    $('#detail2bigfile').html(fileName);
});

$('#detail3big').change(function () {
    var str = $(this).val();
    var fileName = str.substring(str.lastIndexOf("\\") + 1);
    $('#detail3bigfile').html(fileName);
});

$('#isbn').focus(function(){
	$('#info').html('&nbsp;');
});

$('#isbn').blur(function(){
	var isbn = $("#isbn").val();
    if (isbn == null || isbn == "") {
        $("#info").text("isbn不能为空！");
        $("#info").css("color","red");
        return false;
    }
    $.ajax({
        type:"POST",
        url:"/admin/searchBookByIsbn",
        data:"isbn="+isbn,
        success:function(msg)
        {
            if(msg ===true){
                $("#info").text("isbn已存在");
                $("#info").css("color","red");
            }else if(msg === false){
                $("#info").text("");
            }
        }
    });
});

$('#bt-submit').click(function(){
    //读取用户的输入——表单序列化
    var formData = new FormData($('#fm-add').get(0));
    console.log(formData);
    //异步提交请求，进行验证
    $.ajax({
    	async: true,
        type: 'POST',
        url: '/admin/product_addTo',
        data: formData,
        processData: false,// 不对数据进行转换
        contentType: false,// 避免jQuery对contentType操作，失去请求头分界符，使服务器不能正常解析文件
        success: function(msg){
            if(msg===true){  //成功
            	alert("添加成功！");
                window.location.href =  "/admin/product_add";
            }else{ //失败
                $('#info').html('添加失败！');
                $("#info").css("color","red");
                $('#bt-submit').attr("disabled",false);
            }
        }
    });
    $('#bt-submit').attr("disabled",true);
});
</script>
</body>
</html>
